<template>
	<view class="tree-wrapp">
		<view class="tree-item" :style="item.id ? '' : 'margin-bottom:16rpx'">
			<view :class="['head', verification(item) ? 'disabled' : '']" v-if="item.id" @click.stop="changeShow">
				<image src="@/static/images/down_pie.png" :class="isOpen ? 'rt45' : ''" mode="scaleToFill"
					class="left-icon" v-if="item[defaultProps.children] && item[defaultProps.children].length > 0"></image>
				<view class="txt">
					<text :style="{ color: selected || it == keyword ? '#0091FF;' : '' }" v-for="(it, idx) in nameText"
						:key="idx">{{ it }}</text>
				</view>
				<view @click.stop="changeShow('check')" :class="[selected ? 'right-check right-bg' : 'right-check']"
					v-if="item.type == 2">
				</view>
			</view>
			<view class="content" v-if="item[defaultProps.children] && item[defaultProps.children].length > 0" v-show="isOpen">
				<treeNode :selectIds="selectIds" :keyword="keyword" :defaultProps="defaultProps" :disabledIdArr="disabledIdArr" :parentSelect="parentSelect"
					:item="{ ...it, isOpen: keyword ? true : false }" @node-click="$emit('node-click', $event)"
					v-for="(it, idx) in item[defaultProps.children]" :key="idx">
				</treeNode>
			</view>
		</view>
	</view>
</template>

<script>
import treeNode from './tree-node.vue';
export default {
	name: 'treeNode',
	// componentName: 'treeNodes',
	components: {
		treeNode
	},
	props: {
		defaultProps:Object,
		keyword: [String, Number],
		parentSelect: {
			// 父级是否可选
			type: Boolean,
			default: true
		},
		selectIds: {
			type: Array,
			default: () => {
				return [];
			}
		}, 
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		disabledIdArr: {
			type: Array,
			default: () => {
				return [];
			}
		}, 
	},
	data() {
		return {
			isOpen: false,
			checkArr: [],
			selected: false
			// 本地选中状态
		};
	},
	inject: ['setSelectNode', 'onClickItem'],
	created() {
		this.isOpen = this.item.isOpen || false;
		// console.log(this.,'selectids');
	},
	computed: {
		nameText() {
			if (this.keyword) {
				let arr = String(this.item.name || '').split(this.keyword);
				let arr2 = [];
				for (let i = 0; i < arr.length; i++) {
					arr2.push(arr[i]);
					if (i < arr.length - 1) {
						arr2.push(this.keyword);
					}
				}
				return arr2;
			} else {
				return [this.item.name];
			}
		},
	},
	watch: {
		selectIds(val) {
			if (val && val.length && val.indexOf(String(this.item[this.defaultProps.id])) !== -1) {
				// this.selected = true;
			
				this.setSelectNode(this);
				this.onClickItem({ ...this.item });
			} else {
				// this.selected = false;
			}
		},
		keyword() {
			if (this.keyword) {
				this.isOpen = true;
			}
		}
	},
	methods: {
		verification(row) {
			let Boolean;
			if (row.flag > 0) {
				Boolean =  this.disabledIdArr.some(item=>item.floorStandId == row.id && item.partsId == row.partsId);
			} else {
				Boolean = this.disabledIdArr.some(item=>item.partsId == row.id);
			}
			return Boolean;
		},
		changeShow(type) {
			if (type == 'check' || !this.item[this.defaultProps.children]) {
				if (this.item.type !== 2) {
					return;
				}
				let Boolean = this.verification(this.item);
				if (Boolean) {
					if (this.item.name != '其他') {
						uni.showToast({
							title: '禁止重复添加部件',
							icon: 'none',
						});
						return;
					}
				}
				if (this.selected) {
					this.selected = false;
					this.onClickItem({});
				} else {
					this.setSelectNode(this);
					this.onClickItem({ ...this.item });
				}
			} else {
				if (this.item[this.defaultProps.children]) {
					this.isOpen = !this.isOpen;
				}
			}
			this.$forceUpdate();
		}
	}
};
</script>

<style scoped lang="scss">
@mixin animate2 {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.tree-item {
	padding: 10rpx 0rpx;
	padding-left: 10rpx;
	background-color: #fff;
	margin: 20rpx 0;

	.disabled {
		.txt {
			color: #eee !important;
		}
	}

	.head {
		display: flex;
		align-items: center;
		line-height: 60rpx;

		.txt {
			font-size: 30rpx;
			color: #222;
			flex: 1;
		}
	}

	.right-ifon {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		transform: rotate(-90deg);
	}

	.right-check {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx #CCCCCC solid;
	}

	.right-bg {
		// background-color: #0091FF;
		border: none;
		background: url("https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/%E4%B8%8B%E8%BD%BD.png");
		background-size: 32rpx 32rpx;
		background-repeat: no-repeat;
	}

	.left-icon {
		margin-right: 16rpx;
		width: 22rpx;
		height: 22rpx;
		@include animate2;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);

		&.rt45 {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
		}
	}

	.content {
		padding-left: 40rpx;
	}
}
</style>
